import { useEffect, useState } from "react";
import { Empty } from "antd";
import "./index.scss";
import { searchChat } from "@renderer/api";

type PropType = {
  keyword: string;
};
const SearchList = ({ keyword }: PropType): JSX.Element => {
  console.log("keyword");

  const [activedId, setActiveId] = useState("chat");
  const [listData, setListData] = useState<Array<any>>([]);

  const handleItemClick = (userId) => {
    setActiveId(userId);
  };
  const isActive = (userId) => {
    if (userId === activedId) {
      return "active";
    } else {
      return "";
    }
  };
  const Content = () => {
    if (listData.length > 0) {
      return listData.map(({ userId, avatar, userName, message, time, status }) => {
        return (
          <div
            key={userId}
            className={`search-item ${isActive(userId)}`}
            onClick={() => handleItemClick(userId)}
          >
            <div className="left">
              <img src={avatar}></img>
              <div className="wrap">
                <div className="userName">{userName}</div>
                <div className="message">{message}</div>
              </div>
            </div>
            <div className="right">
              <div className="time">{time}</div>
              <div className="status">{status}</div>
            </div>
          </div>
        );
      });
    } else {
      return (
        <div className="empty">
          {" "}
          <Empty description="暂无记录" />{" "}
        </div>
      );
    }
  };
  useEffect(() => {
    const list = searchChat(keyword);
    setListData(list);
  }, []);
  return (
    <div className="search-list">
      <Content></Content>
    </div>
  );
};

export default SearchList;
